<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Benjamin个人主页</title>
    <!-- 引入样式 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
        html,body {
            margin: 0;
        }
        .el-header{
            padding: 0;
        }

        .carousel-img-container {
            height: 100%;
            text-align: center;
            position: relative;
        }

        .carousel-img{
            position: absolute;
            transform: translateX(-50%);
            left: 50%;  
            height: 100%;
        
        }

        .carousel-img-desc{
            position: absolute;
            transform: translateX(-50%);
            left: 50%;   
            bottom: 5%;
        }

        .content{
            margin: 2rem auto;
        }
        .content .collapse{
            float: left;
        } 
        .content .divider{
            float: right;
        } 

        
        .content::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>

<style>
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 400px;
      margin: 0;
    }

    .m .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 125px;
        margin: 0;
      }
      
    
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-container>
            <el-header>
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1">首页</el-menu-item>
                    <!-- <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-submenu index="2-4">
                            <template slot="title">选项4</template>
                            <el-menu-item index="2-4-1">选项1</el-menu-item>
                            <el-menu-item index="2-4-2">选项2</el-menu-item>
                            <el-menu-item index="2-4-3">选项3</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="3" disabled>消息中心</el-menu-item>
                    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> -->
                </el-menu>


            </el-header>
            <el-main>
                <el-carousel :interval="4000" type="card" :height="carouselHeight">
                    <el-carousel-item v-for="item in imgs" :key="item">
                        <div  class="carousel-img-container" >
                            <img class="carousel-img" :src="item.img">
                            <h2 class="carousel-img-desc"  >{{item.desc}}</h2>
                        </div> 
                    </el-carousel-item>
                  </el-carousel>

                  <el-timeline>
                    <el-timeline-item
                      v-for="(activity, index) in activities"
                      :key="index"
                      :icon="activity.icon"
                      :type="activity.type"
                      :color="activity.color"
                      :size="activity.size"
                      :timestamp="activity.timestamp">
                      {{activity.content}}
                    </el-timeline-item>
                  </el-timeline>

                  <div class="content">
                      <div class="collapse">
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-collapse-item title="一致性 Consistency" name="1">
                              <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                              <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                            </el-collapse-item>
                            <el-collapse-item title="反馈 Feedback" name="2">
                              <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                              <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </el-collapse-item>
                            <el-collapse-item title="效率 Efficiency" name="3">
                              <div>简化流程：设计简洁直观的操作流程；</div>
                              <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                              <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                            </el-collapse-item>
                            <el-collapse-item title="可控 Controllability" name="4">
                              <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                              <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                            </el-collapse-item>
                          </el-collapse>
                      </div>
                  
                      
                      <div class="divider"> 
                        <span>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
                        <el-divider></el-divider>
                        <span>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</span>
                      </div>

                  </div>
                  <el-divider content-position="left">memo</el-divider>
                  <el-calendar v-model="value">
                </el-calendar>
            </el-main>
            <el-footer></el-footer>
        </el-container>
    </div>

    <div style="position: fixed;bottom: 8px;left: 50%; transform: translateX(-50%)">
        <p>
            <a href="http://www.beian.miit.gov.cn/" target="_blank">粤ICP备18036032号</a>
        </p>
    </div>
</body>

<script>
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    if (IsPC()) {
        //  若果是pc端
        document.body.classList.add('desktop')
    } else {
        //  移动端
        document.body.classList.add('m')
    }

    var imgs = [{img: 'features', desc: '新功能效果'},
    {img: 'future', desc: '新功能预测'},
    {img: 'levelup', desc: '效果提升'},
    {img: 'new', desc: '新品宣传'},
    {img: 'production', desc: '数据产出'},
    {img: 'publish', desc: '发布会'}]
    imgs = imgs.map((item) => {
         item.img = 'https://image.popochiu.com/' + item.img + '.svg'
         return item
    }) 

    var activities = [{
          content: '支持使用图标',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定义颜色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定义尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默认样式的节点',
          timestamp: '2018-04-03 20:46'
        }]

    var app = new Vue({
        el: '#app',
        data: {
            activeIndex: '1',
            activeIndex2: '1',
            imgs: imgs,
            activeNames: ['1'],
            activities: activities,
            value: new Date(),
            carouselHeight: IsPC() ? '360px': '125px'
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleChange(val) {
                console.log(val);
            }
        }

         
    })
</script>

</html>